<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" style="height:100%;">
<head>
	<title>案件コスト状況検索-案件詳細</title>
	<jsp:include page="../basePage/head.jsp" />	  
	<jsp:include page="../basePage/jqplot.jsp" />   
    <script src="./js/util/globalajaxevent.js"></script>   
       
	<style type="text/css">			
	 	 #caseName{width:100px;}	 
	</style>
 	 <style>
		    .ui-datepicker-calendar {display: none;}
		     #currency{width:100px;} 
   	</style>
		    
	<script>

	 $(function() {
	 
		 var exportExcel = '${exportExcel}';
		 if (exportExcel=='true'){
		 	$('#buttonExport').show();
		 }else{
		 	$('#buttonExport').hide();
		 }
		 
		//设置默认日期 datepickerUtil.js
		//开始日期：上个月 结束日期 当前日期		
		var toDate = getLastMonth();
		var fromDate = getLastYearMonth();
		
		//日期选择框格式化 		
		 initDatepicker('dateFrom',fromDate);
		 initDatepicker('dateTo',toDate);
 
		//设置案件和工程下拉框
	    $("#caseName,#currency").multiselect({selectedList: 1,header:false, multiple: false,noneSelectedText:""}) ;
		 	
		$('#buttonSearch,#buttonExport').button();		 			
	 
		$( "#buttonSearch" ).button().click(function( event ) {
			
			var validate = $("#dataForm").validate().element($("#caseName"));
			 
			if (!validate){
				return;
			}
			
			$('#CaseInfo,#CostInfoTableA,#CostInfoTableB,#ChartA').empty();
			$('#ChartB').empty();
			
			 $.ajax({
			        type: "POST",
			        async: true,
			        url:"caseCostDetailQuery!refreshData.action",
			        data:$('#dataForm').serialize(),			         
					success: function (data) {
						
						
						if (data.tableData.CostInfoTableA.length==0 ||
							data.tableData.CostInfoTableB.length==0 || 
							data.tableData.CaseInfoTable.length==0 ){
							
							 $( "#noResult" ).dialog({modal:true});
								return;	}
						
						outputGrid('CaseInfo',data.tableData.CaseInfoTable,"案件運用関連報告(瀋陽部分のみ)");
						outputGrid('CostInfoTableA',data.tableData.CostInfoTableA,"案件別月総費用_構成");
						outputGrid('CostInfoTableB',data.tableData.CostInfoTableB,"案件別1枚当り費用_構成");						
						
						
						 
						var width=$("#CaseInfo").width();     	  				      	
				     	$("#CaseInfo_datagrid").setGridWidth(width);
				     	var width=$("#CostInfoTableA").width();     	  				      	
				     	$("#CostInfoTableA_datagrid").setGridWidth(width);
				     	var width=$("#CostInfoTableB").width();     	  				      	
				     	$("#CostInfoTableB_datagrid").setGridWidth(width);
				     	
				     	setColumnsNoSort("#CaseInfo_datagrid"); 
						outputChartA("ChartA",data.tableData);
						outputChartB("ChartB",data.tableData);
 					},
			        error: function (err) {
						alert(err);
			        }
				});	  	 		  		
		 }); 
		
		$( "#buttonExport").button().click(function( event ) {
			var validate = $("#dataForm").validate().element($("#caseName"));
			 
			if (!validate){
				return;
			}
			$('#dataForm').attr('action','caseCostDetailExport!export.action').submit();
		});
	});
	 
	 function outputChartA(target,data){
			$('#' + target).empty();
			if(data == null ||
			   data.length==0 || 
			 
			   data.OPEntryCost ==0 ||
			   data.ServersCost ==0 ||
			   data.WelfareCost ==0 ||
			   data.OtherCost==0 ||
			   data.TotalCost==0
			   ) {
				 
				$( "#noResult" ).dialog();
				return;			   
			   }
			    
			
			var maxValue = data.TotalCost[0][1] * 1;
			
			for(var i=0;i<data.TotalCost.length;i++){			
				var value= data.TotalCost[i][1] *1;
				if (value> maxValue)
					{ maxValue = value;}
			}
			
			var maxTicks = ( Math.ceil(maxValue * 1.1 / 10) *10 );			
			var tickInter = Math.ceil(maxTicks /10);
			
			var currencyUnit = '万円';
			if ( $('#currency').val() == "rmb"){
				currencyUnit = '万元';
			 }
			
			
			$.jqplot(target, 
					  [data.OPEntryCost,
					   data.ServersCost,
					   data.WelfareCost,
					   data.OtherCost,
					   data.TotalCost], {		    
					    // Turns on animatino for all series in this plot.
		        		animate: true,
		        		// Will animate plot on calls to plot1.replot({resetAxes:true})
		        		animateReplot: true,
			     		//动画用      
			    		axesDefaults: {pad: 0},		            
		        		//图例
			        		legend:{show:true,
			        			placement : "outsideGrid",
			        			location: 's', 
			        			fontFamily: 'MS PGothic',
			        			fontSize: '8pt',
			        			renderer: $.jqplot.EnhancedLegendRenderer,
			        			rendererOptions: {numberColumns: 5}
			        			},			     
			     		//柱状图
			    		series:[
	 							{label: '人員',color:'#ff99cc',showMarker:false},
								{label: '設備',color:'#99ccff',showMarker:false},
								{label: '福利 ',color:'#99cc00',showMarker:false},
								{label: 'その他',color:'#ff9900',showMarker:false},
								{label: '合計 ',color:'#000080',showMarker:false},   																								
			                    {xaxis:'x2axis', yaxis:'y2axis'
			                    },
			                    {rendererOptions: {animation: {speed: 2000}}
			                    }],
			             //折线图
			    		seriesDefaults: {rendererOptions: {
			    	          smooth: true
			            }},		  
			     		axesDefaults: {tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
	        				   tickOptions: {showGridline: true,angle: 0,fontFamily: 'MS PGothic',fontSize: '10pt'}								
			    				},  
		  	    		axes: {xaxis: { renderer: $.jqplot.CategoryAxisRenderer},
			      			   /* x2axis: {renderer: $.jqplot.CategoryAxisRenderer,tickOptions: {show: false}}, */
				      			   yaxis: { min:0,max:maxTicks,tickInterval:tickInter ,tickOptions:{formatString:'%.0f' + currencyUnit} },
			      			   /* y2axis: { autoscale:true,min:0,max:800,tickInterval:200 ,tickOptions: {showGridline: true}} */
			    			  	},
			 			//mark上高亮    
		     			highlighter: {
		     				show: true,
		     				sizeAdjust: 7.5,
		     				tooltipAxes: 'y'
		     				},
		      			//鼠标移动 显示坐标位置数据
		      			cursor: {show: false},		      				     			
			  });
		};
		
		function outputChartB(target,data){
			$('#' + target).empty();
			if(data == null ||
			   data.length==0 || 
			   data.EveryOPEntryCost ==0 ||
			   data.EveryServersCost ==0 ||
			   data.EveryInsuranceCost ==0 ||
			   data.EveryAllowanceCost ==0 ||
			   data.EveryOtherCost1 ==0 ||
			   data.EveryTotalCost==0)  return;
			 
			
			var maxValue = data.EveryTotalCost[0][1] * 1 ;
			
			for(var i=0;i<data.EveryTotalCost.length;i++){			
				var value= data.EveryTotalCost[i][1] * 1;
				if (value> maxValue)
					{ maxValue = value;}
			}
			
			var maxTicks =  Math.ceil(maxValue * 1.1 /5) * 5   ;
			var tickInter = Math.ceil(maxTicks / 5);
			 
			var currencyUnit = '円';
			if ( $('#currency').val() == "rmb"){
				currencyUnit = '元';
			 }
			
			$.jqplot(target, 
					  [data.EveryOtherCost2B,
					   data.EveryOtherCost1B,
					   data.EveryAllowanceCostB,
					   data.EveryInsuranceCostB,
					   data.EveryServersCostB,
					   data.EveryOPEntryCostB,
					   data.EveryTotalCost], 
					  {    
						// Turns on animatino for all series in this plot.
		        		animate: true,
		        		// Will animate plot on calls to plot1.replot({resetAxes:true})
		        		animateReplot: true,
			     		//动画用      
			    		axesDefaults: {pad: 0},	
			    		 
		        		//图例		        		
		        		legend:{show:true,
		        			placement : "outsideGrid",
		        			location: 's', 
		        			fontFamily: 'MS PGothic',
		        			fontSize: '8pt',
		        			renderer: $.jqplot.EnhancedLegendRenderer,
		        			rendererOptions: {numberColumns: 7}
		        			},		 	 
			     		//柱状图
			    		series:[ 
				                {renderer:$.jqplot.BarRenderer,label: 'その他2',color:'#ffcc00',
				            	     rendererOptions: { animation: { speed: 2500 },  stackSeries: false,barWidth: 15, barPadding: -15, barMargin: 0,highlightMouseOver: false },
				            	     pointLabels:{ show:true,labels:data.EveryOtherCost2,  ypadding: -15,  escapeHTML:false}
				                }, 
			                    {renderer:$.jqplot.BarRenderer,label: 'その他1',color:'#ff9900',
				            	     rendererOptions: { animation: { speed: 2500 },  stackSeries: false,barWidth: 15, barPadding: -15, barMargin: 0,highlightMouseOver: false },
				            	     pointLabels:{ show:true, labels:data.EveryOtherCost1,  ypadding: -15,  escapeHTML:false}
				                },
 			                   {renderer:$.jqplot.BarRenderer,label: '福利手当て',color:'#8de38d',
				            	     rendererOptions: { animation: { speed: 2500 },  stackSeries: false,barWidth: 15, barPadding: -15, barMargin: 0,highlightMouseOver: false },
				            	     pointLabels:{ show:true, labels:data.EveryAllowanceCost, ypadding: -5,  escapeHTML:false}
				                 },
			                    {renderer:$.jqplot.BarRenderer,label: '福利厚生',color:'#99cc00',
				            	     rendererOptions: { animation: { speed: 2500 },  stackSeries: false,barWidth: 15, barPadding: -15, barMargin: 0,highlightMouseOver: false },
				            	     pointLabels:{ show:true, labels:data.EveryInsuranceCost, ypadding: -10,  escapeHTML:false}
				                },
			                    {renderer:$.jqplot.BarRenderer,label: '設備', color:'#99ccff',
				            	     rendererOptions: { animation: { speed: 2500 }, stackSeries: true,	barWidth: 15, barPadding: -15, barMargin: 0,highlightMouseOver: false },
				            	     pointLabels:{ show:true,labels:data.EveryServersCost,  ypadding: -5,  escapeHTML:false}
				                 },	
				                 {renderer:$.jqplot.BarRenderer,label: '人員',color:'#ff99cc',
				            	     rendererOptions: { animation: { speed: 2500 }, stackSeries: true,	barWidth: 15, barPadding: -15, barMargin: 0, highlightMouseOver: false },
				            	     pointLabels:{ show:true, labels:data.EveryOPEntryCost,   ypadding: -15,  escapeHTML:false}
				                  },  
				                    
			                    {xaxis:'x2axis', yaxis:'y2axis'},
			                    {rendererOptions: {animation: {speed: 2000}}
			                    }],
			            //折线图
			    		seriesDefaults: {label: '合計',
			    						 color:'#000080',
			    						 pointLabels: { show: true },
			    						 showMarker:true,						    	
			    	  					 markerOptions: {show: true}						    	
			    				},		   
			     		axesDefaults: {tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
			     			 tickOptions: {showGridline: true,angle: 0,fontFamily: 'MS PGothic',fontSize: '10pt'}							
			    				},  
			    		axes: {xaxis: { renderer: $.jqplot.CategoryAxisRenderer},
			      			   x2axis: {renderer: $.jqplot.CategoryAxisRenderer,tickOptions: {show: false}},
			      			   yaxis: {autoscale:true,min:0,max:maxTicks,tickInterval:tickInter,tickOptions:{formatString:'%.0f' + currencyUnit}},
			      			   y2axis: {autoscale:true,min:0,max:maxTicks,tickInterval:tickInter ,tickOptions: {show: false,showGridline: false}}
			    			  	},
			 			//mark上高亮    
		     			highlighter: {
		     				show: false,
		     				sizeAdjust: 7.5,
		     				tooltipAxes: 'y'
		     				},
		      			//鼠标移动 显示坐标位置数据
		      			cursor: {show: false}
			  }).replot();
		}
		function outputGrid(target,data,caption){		
	  		$('#' + target ).empty();  		  	
			if(data == null || data.length==0  ) return;
			
	   		var row =[];
			for(var i=0;i<data.length  ;i++){				 							
				row.push($("<tr></tr>"));				 
			}  ;
			
		   	$('#' + target).empty().append('<table style="float:inherit" id=' + target + '_datagrid><tbody></tbody></table>');
			var table = $('#' + target + ' tbody');

		    var j=0;
	  		$.each(data,function(key,value){
	  			var index=0;
	  			$.each(value,function(k,v){  			  			
	  				var th = $("<th id =" + index + " nowrap='nowrap'></th>");
	  				var td = $("<td nowrap='nowrap'></td>");  		
	  	  		    if (j ==0 ){		
						th.append(v);
	  	  	        	th.appendTo(row[j]);
	  	  	        }
	  	  		    else{					  	  				
	  	  				td.append(v);
	  	  				td.appendTo(row[j]);
	  	  		    }
	  	  	    	index++;
	  			});  			
	  			j++;
	  		});
	  		for(var i=0;i<row.length;i++){
	  			row[i].appendTo(table);			
			};		
					   					
			  var ColModel='';
			  var Colwidth = 0;
			  for(var i=0;i<data[0].length  ;i++){				 							
			   if ( ColModel.length>0){
				   ColModel += ',';} 
			
			   if (target== "CaseInfo"){
			       if (i==0){
			    	   Colwidth = 20;
			        } else if (i==1) {
			    	   Colwidth =90;
			       }  else if (i==2) {
			    	   Colwidth =120;
			       }else {
			    	   Colwidth =60;
			       }
			    }  else if (target== "CostInfoTableA"){
				       if (i==0){
				    	   Colwidth = 120;
				       } else {
				    	   Colwidth =60;
				       }
			       } else if (target== "CostInfoTableB"){
				       if (i==0){
				    	   Colwidth = 120;
				        }  else {
				    	   Colwidth =60;
				       }
				    }  
			  
				   ColModel += '{name:"' +i +'", index: "' + i+ '", width: ' + Colwidth+', align: "left" ,sortable:false} '; 
			  }  ;
  	  		//tableToGrid(target + ' table',{
     	  	   tableToGrid('#' + target+"_datagrid",{
	  			//datatype: "local",  
	  			autoWidth:true,	  			
	  			height: "100%",           	  	
	         	caption: caption,
				shrinkToFit: false,
			  	colModel:eval("([" + ColModel + "])")
				,gridComplete:function(){				
					 paintColor(target);
				  
				 }   
	  		  });       
		};	
	  	
	  	function paintColor(target){  		  	
	  		$('#' + target + '_datagrid tr').each(function(){
			
	  			if (target =="CaseInfo"){
	  				 $(this).children("td").eq(3).nextAll().css("text-align",'right');
					 $(this).children("td").eq(3).css("text-align",'center');
	  			
		  			var v=$(this).children("td:first").text();
				 	var color='';
					if (  v=="16" ||v=="17" ) {
			    		color ="#e5ffe5";
			    	} else if (v=="4" ) {
			    		//color ="#ffff99";
			    		color ="#ffffbb";
			    	} else if (v=="5" ||v=="6" ) {
			    		color ="#ddffff";
			    	} else if (v=="7" ) {
			    		//color ="#ffcc99";
			    		color='#FFE0BD';
			    	} else if (v=="8" ||v=="9" ||v=="10"||v=="11" ||v=="12" ||v=="13" ||v=="14" ||v=="15") {
			    		color ="#ffffcc";
			    	} else if (v=="18" ||v=="19") {
			    		color ="#d5ffd5";
			    	} else if (v=="20" ||v=="21") {
			    		color ="#ddffff";
			    	} else if (v=="22" ||v=="23") {
			    		color ="#cdffd5";
			    	} else if (v=="24" ||v=="25") {
			    		color ="#d9d9ff";
			    	} else if (v=="26" ||v=="27") {
			    		color ="#ccccff";
			    	}  
					$(this).children("td") .css("background",color); 
			 
	  		   }
	  			
 
				if (target.substring(0,13) =="CostInfoTable" ){					
				
					$(this).children("td").eq(0).nextAll().css("text-align",'right');
					$(this).children("td").eq(0).css("text-align",'center');
					 
					var v=$(this).children("td:first").text();					 
					
					if (v=="合計") {
						$(this).children("td").css("background",'#ddffff');
					
			     
			    	}else{ 
						$(this).children("td").eq(0).css("background",'#ccccff');
			    	}
				}
				 
			});		  		
	  	};	  	  			  	
	</script>

</head>

<body>
 <s:form id="dataForm" theme="simple">			
	<table style="white-space:nowrap">
		<tr>
			<th>貨幣</th>
			<td ><select id="currency" name="currency" >
					<option value ="rmb">人民元</option>	
					<option value ="jpy">日本円</option>
				 
				 </select>
			</td>	
			
			<th>案件</th><td ><s:select id="caseName" name="cases"  list="%{caseList}"  listKey="caseName" listValue="caseName"  multiple="true"  cssClass="required" >  </s:select></td>
		 	<th>時間帯</th><td ><s:textfield id="dateFrom" name="dateFrom" key="value" label="开始日" cssClass="datebox"/></td>
		 	<th>  ～</th> <td ><s:textfield id="dateTo" name="dateTo" key="value" label="结束日"  cssClass="datebox"/></td>
			<td width=30></td>
			<td><a id="buttonSearch" href="#" class="button" >検索</a></td>
			<td><a id="buttonExport" href="#" style="width:100px" class="button"  >エクスポート</a></td>			
			<td>
		  
				<span id="myIndicator" >
					<img  width=25 height=20 src="./img/ajax-loader.gif" alt="ロード中..." />ロード中....
				</span>
			 </td>
		</tr>
	</table>
</s:form> 

<hr>

<div id="dataContainer" style="position:absolute;overflow: auto!important;top:35px;bottom:0px;width:100%;">					    			
 		<div id="CaseInfo" class="grid"></div>　 		
		<div id="CostInfoTableB" class="grid"></div> 
		<div id="ChartB" class="chart"></div>		
		<div id="CostInfoTableA" class="grid"></div> 
		<div id="ChartA" class="chart"></div>
		
		 <div id="noResult" title="メッセージ" style="display:none;">
 			 <p>该当する検索结果がありません。</p>
 			 <p>别の条件でもう一度検索してください。</p>
		</div>
</div>

</body>  
</html>